<template>
  <el-card class="m-4 p-2" v-enter-helper="refreshData">
    <div class="flex justify-end ">
      <el-form inline>
        <el-form-item>
          <el-input
            class="mr-4"
            placeholder="请输入用户编号"
            v-model="searchUserCode"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="content" placeholder="请输入冻结原因">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="deBounceWrap(refreshData)"
            v-text="'搜索'"
          />
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border>
      <el-table-column label="序号" prop="log_id" />
      <el-table-column label="管理员" prop="admin_name" />
      <el-table-column label="用户编号" prop="user_code" />
      <el-table-column label="用户昵称" prop="nickname" />
      <el-table-column label="IP" prop="client_ip" />
      <el-table-column label="操作时间" prop="add_time" />
      <el-table-column label="操作内容" prop="content" />
    </el-table>

    <el-pagination
      class="text-right mt-2"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="meta.page"
      :page-sizes="pageSizes"
      background
      layout="sizes, prev, pager, next, jumper"
      :total="meta.total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
/*
 * @desc: 账户冻结收益日志
 * @params: none
 * @return: undefined
 * */
import { getUserAccountLog } from "../../api/member/common";

export default {
  name: "frozenAccountIncomeLog",
  data() {
    return {
      /* @desc: 表格数据 */
      tableData: [],
      /* @desc: 分页元数据 */
      meta: {
        page: 1,
        per_page: 10,
        total: 0
      },
      /* @desc: 分页数量列表 */
      pageSizes: [10, 15, 20, 30, 50, 100, 200],
      /* @desc: 搜索条件 用户 user_code */
      searchUserCode: undefined,
      content: undefined
    };
  },
  created() {
    this.refreshData();
  },
  methods: {
    /*
     * @desc: 获取当前数据
     * @params: none
     * @return: undefined
     * */
    refreshData() {
      const { page, per_page } = this.meta;
      this.getData(page, per_page);
    },
    /*
     * @desc: 获取表格数据
     * @params: page:     int 要获取的数据的页码
     * @params: per_page: int 分页数量
     * @return: undefined
     * */
    getData(page, per_page) {
      getUserAccountLog(page, per_page, this.searchUserCode, this.content).then(
        res => {
          const {
            code,
            data: { data, total, per_page, current_page }
          } = res;
          if (code === 200) {
            this.tableData = data;
            this.meta.page = current_page;
            this.meta.per_page = per_page;
            this.meta.total = total;
          }
        }
      );
    },
    /*
     * @desc: 分页显示数量 发生改变回调
     * @params: pageSize:int 分页数量
     * @return: undefined
     * */
    handleSizeChange(pageSize) {
      this.meta.per_page = pageSize;
      this.refreshData();
    },
    /*
     * @desc: 页码发生改变时回调
     * @params: page: int  当前页码
     * @return: undefined
     * */
    handleCurrentChange(page) {
      this.meta.page = page;
      this.refreshData();
    }
  }
};
</script>
